<template>
    <div class="container">
        <div class="top">
            <!-- <el-select v-model="search.type" placeholder="请选择类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>-->
            <el-input style="width: 300px" :disabled="true" placeholder="请搜索类别信息" v-model="classNameList.name">
                <template slot="prepend">类别</template>
                <el-button slot="append" icon="el-icon-search" @click="classBtn"></el-button>
            </el-input>
            <el-input style="width: 300px" :disabled="true" placeholder="请搜索仓库" v-model="warehouseList.name">
                <template slot="prepend">仓库</template>
                <el-button slot="append" icon="el-icon-search" @click="warehouseBtn"></el-button>
            </el-input>
            <el-date-picker value-format="yyyy-MM-dd" v-model="date" type="daterange" :clearable="false" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <el-button size="small" type="primary" icon="el-icon-search" class="handleSearch"
                @click="handleSearch()">查询</el-button>
            <el-button size="small" type="danger" class="handleSearch" icon="el-icon-delete" @click="empty()">清空</el-button>
            <el-button class="add" icon="el-icon-refresh" size="small" type="success" @click="refresh">刷新</el-button>
            <el-button type="info" size="small" icon="el-icon-tickets" @click="derive()">导出</el-button>
        </div>
        <el-table max-height="600" :data="tableData" border style="width: 100%" empty-text="暂无数据">
            <el-table-column prop="category_code" label="分类编码" align="center"></el-table-column>
            <el-table-column prop="category_name" label="分类名称" align="center"></el-table-column>
            <el-table-column prop="withholding_fee" label="预提费" align="center"></el-table-column>
            <el-table-column prop="markup" label="加价" align="center"></el-table-column>
            <el-table-column prop="buyerprofit_price" label="采购加价" align="center"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination @page="handleSizeChange" @pagesize="handleCurrentChange" :pageData="pageData"></pagination>
        <classDialog :classdialog="classdialog" @tag="classTag"></classDialog>
        <warehouseselect :warehouseselect="warehouseselect" @tag="warehouseTag"></warehouseselect>
    </div>
</template>
<script>
import { getnowDate } from "@/utils/index";
import Pagination from "@/components/pagination";
import ClassDialog from "@/components/superGrossMargin/classDialog";
import { saleAddMoneyByClass } from "@/api/grossMargin/grossMarginList";
import { getToken } from "@/utils/auth";
import { classifyList } from "@/api/commodity/commodityList";
import Warehouseselect from "@/components/commodity/warehouseselect";
export default {
    components: {
        pagination: Pagination,
        classDialog: ClassDialog,
        warehouseselect: Warehouseselect,
    },
    data() {
        return {
            //页面数据
            tableData: [],
            //分页
            pageData: {
                pageSizes: [10, 20],
                pageSize: 10,
                page: 1,
                total: null,
                layout: "total, sizes, prev, pager, next, jumper",
            },
            //默认时间
            normal_startime: getnowDate().startimer,
            normal_endtime: getnowDate().endtimer,
            search: {
                class_id: "",
                start_time: "",
                end_time: "",
            },
            outer: {
                options: [],
                value: "",
                list: [],
                loading: false,
                id: "",
            },

            classdialog: {
                centerDialogVisible: false,
            },
            classNameList: {
                name: "",
                code: "",
            },
            warehouseselect: {
                centerDialogVisible: false,
            },
            warehouseList: {
                name: "",
                code: "",
            },
            date: [],
        };
    },
    created() {
        this.search.start_time = this.normal_startime;
        this.search.end_time = this.normal_endtime;
        if (this.normal_startime) {
            this.date.push(this.search.start_time);
        }
        if (this.normal_endtime) {
            this.date.push(this.search.end_time);
        }
        // this.getData();
    },
    methods: {
        //获取页面数据
        getData() {
            let data = {
                limit: this.pageData.pageSize,
                page: this.pageData.page,
                warehouse_code: this.warehouseList.code,
                class_id: this.classNameList.code,
                start_date: this.search.start_time,
                end_date: this.search.end_time,
            };

            saleAddMoneyByClass(data)
                .then((res) => {
                    if (res.code == 0) {
                        this.tableData = res.data.list.data;
                        this.pageData.page = res.data.list.current_page;
                        this.pageData.pagesize = res.data.list.per_page;
                        this.pageData.total = res.data.list.total;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        classTag(data) {
            this.classNameList = {
                name: "",
                code: "",
            };
            console.log(data, 11111);
            let arrName = [];
            let arrCode = [];
            data.forEach((res) => {
                arrName.push(res.name);
                arrCode.push(res.id);
            });
            this.classNameList.name = arrName.join(",");
            this.classNameList.code = arrCode.join(",");
        },
        //超级类别搜索
        classBtn() {
            this.classdialog = {
                centerDialogVisible: true,
            };
        },
        warehouseTag(data) {
            this.warehouseList = {
                name: "",
                code: "",
            };
            console.log(data, 11111);
            let arrName = [];
            let arrCode = [];
            data.forEach((res) => {
                arrName.push(res.name);
                arrCode.push(res.code);
            });
            this.warehouseList.name = arrName.join(",");
            this.warehouseList.code = arrCode.join(",");
        },
        //超级仓库搜索
        warehouseBtn() {
            this.warehouseselect = {
                centerDialogVisible: true,
            };
        },
        // 本地搜索
        handleSearch() {
            if (this.date) {
                this.search.start_time = this.date[0];
                this.search.end_time = this.date[1];
            }
            this.pageData.page = 1;
            this.pageData.total = null;
            this.getData();
        },
        // 导出
        derive() {
            this.$confirm("是否导出?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let link = document.createElement("a");
                    link.href = `${this.$axios.defaults.baseURL
                        }/smkapi/report/exportSaleAddMoneyByClass?token=${getToken()}&class_id=${this.classNameList.code
                        }&start_date=${this.search.start_time}&end_date=${this.search.end_time
                        }&warehouse_code=${this.warehouseList.code}`;
                    link.click();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消导出",
                    });
                });
        },
        //刷新
        refresh() {
            this.empty();
            this.getData();
        },
        //清空
        empty() {
            this.date = [];
            this.date.push(this.normal_startime);
            this.date.push(this.normal_endtime);
            this.search = {
                type: "",
                class_id: "",
                start_time: this.normal_startime,
                end_time: this.normal_endtime,
            };
            this.classNameList.name = "";
            this.classNameList.code = "";
            this.warehouseList.name = "";
            this.warehouseList.code = "";
        },
        //每页多少条
        handleCurrentChange(val) {
            this.pageData.page = 1;
            this.pageData.pageSize = val;
            this.getData();
        },
        //选取页数
        handleSizeChange(page) {
            this.pageData.page = page;
            this.getData();
        },
    },
};
</script>
<style scoped>
.top {
    position: relative;
    margin-bottom: 5px;
}

.add {
    position: absolute;
    right: 0;
    top: 4px;
}

.pagination {
    text-align: right;
    padding: 10px;
}
</style>